<template>  
    <view class="container">  
		<view class="flexc banner">
			<!-- <image v-for="(item, index) in banners" :key="index" :src="item.pic" mode="widthFix"></image> -->
			<swiper autoplay="true">
				<swiper-item
					v-for="(item, index) in banners"
					:key="index"
				>
					<view class="swiper-item" @tap="navTo2(item.url)">
						<image :src="item.pic" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="input-content">

			<view class="input-tit">
				<text>基本信息</text>
			</view>
			<view class="input-item">
				<text class="tit">姓名</text>
				<input type="text" v-model="form.contactPerson" placeholder="请输入法人姓名" />
			</view>
			<view class="input-item">
				<text class="tit">手机号</text>
				<input
					type="number"
					v-model="form.contactPhone"
					placeholder="请输入手机号"
				/>
			</view>
			<view class="input-item">
				<text class="tit">店铺名称</text>
				<input type="text" v-model="form.storeName" placeholder="请输入店铺名称" />
			</view>
			<view class="input-item">
				<text class="tit">企业名称</text>
				<input type="text" v-model="form.companyName" placeholder="请输入企业名称" />
			</view>
			<view class="input-item">
				<text class="tit">企业法人</text>
				<input type="text" v-model="form.legalPerson" placeholder="请输入企业法人" />
			</view>
			<view class="input-item">
				<text class="tit">法人身份证</text>
				<input type="text" v-model="form.cardNo" placeholder="请输入法人身份证" />
			</view>
			<view class="input-item">
				<text class="tit">营业执照号</text>
				<input type="text" v-model="form.busLicenec" placeholder="请输入营业执照号" />
			</view>
			<view class="input-item" @click="addressShow=true;">
				<text class="tit">所在区</text>
				<text class="info" v-if="city">{{city}}</text>
				<text class="info" v-else>选择省/市/区</text>
				<!--地址三级联动-->
<!-- 				<rf-pick-regions style="width:100%;"
					:addressData="profileInfo"
					@getRegions="handleGetRegions"
				>
				</rf-pick-regions> -->
			</view>
			<view class="input-item">
				<text class="tit">详细地址</text>
				<input type="text" v-model="form.companyDetailAddress" placeholder="请输入详细地址" />
			</view>
			
			<view class="input-item">
				<text class="tit">类型</text>
				<text class="span" v-if="form.type == '0'">门店</text>
				<text class="span" v-if="form.type == '1'">商家</text>
				<i class="iconfont cell-icon iconxia"></i>
			</view>
			<view class="input-item">
				<text class="tit">合伙人</text>
				<input
					type="number"
					v-model="form.recommendName" disabled
					placeholder="合伙人"
				/>
			</view>
			<view class="input-item">
				<text class="tit tit2">支付宝账号</text>
				<input type="text" v-model="form.alipay" placeholder="请输入支付宝账号" />
				<!-- <button class="confirm-btn" :class="'bg-' + themeColor.name">绑定</button> -->
			</view>
			<view class="input-item">
				<text class="tit tit2">支付宝真实姓名</text>
				<input type="text" v-model="form.alipayName" placeholder="请输入支付宝真实姓名" />
				<!-- <button class="confirm-btn" :class="'bg-' + themeColor.name">绑定</button> -->
			</view>
			<view class="tips">
				<text>支付宝账号与支付宝真实姓名必须一致，否则会造成收不到款！</text>
			</view>
		</view>

		<view class="input-content">
			<view class="input-tit">
				<text>上传照片</text>
			</view>
			<!--上传图片-->
			<view class="upload-box">
				<text class="span">营业执照</text>
				<view class="flexc column upload" @tap="uploadImage(1)">
					<text v-if="!form.busLicenecPic" class="span">+</text>
					<image v-if="form.busLicenecPic" :src="form.busLicenecPic"></image>
				</view>
			</view>
			<view class="upload-box">
				<text class="span">门头照</text>
				<view class="flexc column upload" @tap="uploadImage(2)">
					<text v-if="!form.shopImg" class="span">+</text>
					<image v-if="form.shopImg" :src="form.shopImg"></image>
				</view>
			</view>

			<button 
				class="confirm-btn"
				:class="'bg-' + themeColor.name"
				@tap="toSubmit"
			>
				修改
			</button>
		</view>

		<pickerAddress v-model="addressShow" @confirm="addresspick" />

    </view>  
</template>  
<script>  
import { uploadImage, memberInfo } from '@/api/userInfo';
import rfPickRegions from '@/components/rf-pick-regions';
import pickerAddress from '@/components/liudx-pickerAddress/index.vue';
export default {
	components: { rfPickRegions, pickerAddress },
		data(){
			return {
				form: {
					storeName: '',
					contactPerson: '',
					contactPhone: '',
					companyDetailAddress: '',
					alipay: '',
					busLicenecPic: '',
					shopImg: '',
					status: 1
				},
				profileInfo: {
					provinceId: '',
					cityId: '',
					countryId: ''
				},
				addressShow: false,
				city: '',
				imageList: [],
				desc: '碎屏宝说明',
				cardUrl1: '',
				cardUrl2: '',
				skus: ['门店', '商家'],
				skuIndex: 0,
				checked: false,
				banners: []
			}
		},
		async onLoad(options){
            this.$http.get(memberInfo).then(async r => {
                let storeId = r.storeId;
                if(storeId){
					this.$http.get('/store/TStoreInfo/querystoreinfo?storeId='+storeId).then(r => {
						this.form = r || {};
					});
				}
            }).catch(() => {

            });
			this.$http.get('/bannerList?storeId=0').then(r => {
				let banners = r || [];
				let arr = [];
				banners.forEach(item=>{
					if(item.orderCount==7){
						arr.push(item)
					}
				})
				this.banners = arr;
			});
		},
		onShow() {
		},
        methods: {
            addresspick(obj) {
            	console.log(obj)
                let arr = [ 'province', 'city', 'area'];
                let place = '';
                arr.map(key => {
                    place += obj[key].name
                })
                this.city = place;
                // this.provinceId = obj.province.id;
                // this.cityId = obj.city.id;
                // this.countryId = obj.area.id;
                this.profileInfo = obj;
            },
			toSubmit(){
				let form = this.form;
				if(!form.storeName){
					this.$mHelper.toast('请输入店铺名称');
					return false
				}
				if(!form.contactPerson){
					this.$mHelper.toast('请输入姓名');
					return false
				}
				if(!form.contactPhone){
					this.$mHelper.toast('请输入手机号');
					return false
				}
				if(!form.alipay){
					this.$mHelper.toast('请输入支付宝账号');
					return false
				}
				if(!this.city){
					this.$mHelper.toast('请选择省市区');
					return false
				}
				if(!form.busLicenecPic){
					this.$mHelper.toast('请上传营业执照');
					return false
				}
				if(!form.shopImg){
					this.$mHelper.toast('请上传门头照');
					return false
				}
				
				form.type = this.skuIndex;
				form.provinceId = this.profileInfo.province.id;
				form.cityId = this.profileInfo.city.id;
				form.districtId = this.profileInfo.area.id;
				this.$http
					.post(`/store/TStoreInfo/updateStoreInfo`, form)
					.then((res) => {
						this.$mHelper.toast('修改成功!');
						let storeId = res.id;
					})
					.catch(() => {

					});
			},
	  		handleGetRegions(e) {
	  			console.log(e)
	  			this.profileInfo.provinceId = e.provinceId;
	  			this.profileInfo.cityId = e.cityId;
	  			this.profileInfo.countryId = e.countryId;
	  		},
			getSku(e){
				this.skuIndex = e.detail.value;
			},
			// 删除已选中图片
			close(e, index) {
				this.imageList[index].splice(e, 1);
			},
			// 监听图片上传
			uploadImage(index) {
				// 从相册选择6张图
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: async function(res) {
						await _this.handleUploadFile(res.tempFilePaths, index);
					}
				});
			},
			// 依次上传图片
			async handleUploadFile(data, index) {
				data.forEach(item => {
					this.$http
						.upload(uploadImage, { filePath: item, image: 'file' })
						.then(async r => {
							if(index==1){
								this.form.busLicenecPic = r;
							}
							else{
								this.form.shopImg = r;
							}
						});
				});
			},
			goBack(){
				uni.navigateBack()
			},
			navTo2(url){
				uni.navigateTo({  
					url: url
				})  
			},
			navTo(url){
				uni.navigateTo({  
					url: '/pages/'+url
				})  
			}
        }  
    }  
</script>  
<style lang='scss'>
page {
	
}

.upload-box{
	.span{ margin-bottom:20rpx; display:block;}
	.upload{
		width: 100%; height:300rpx; background-color: $page-color-light; border-radius:10rpx;
		font-size:28rpx; color:#999; line-height:150%; margin-bottom:20rpx;
		.span{ font-size:60rpx; margin-bottom:0;}
	}
}
.confirm-btn{
	margin-top:40rpx;
}

	.input-content {
		margin: 20upx 20upx;
		background-color: #fff; border-radius: 10rpx; padding: 10rpx;

		.input-tit{
			font-size: $font-base + 2upx; font-weight: 600; margin-bottom: 10rpx;
			image{ width: 40rpx; height: 40rpx; margin-left: 20rpx;}
		}
		.input-item {
			display: flex;
			padding: 0 10upx;
			background: #fff; border-bottom: 1px solid #eee;
			height: 80upx;
			line-height: 80upx;
			margin-bottom: 0; position: relative;

			.info{font-size: $font-sm + 2upx;}
			.iconfont{ line-height:80rpx;}
			.pick{
				width: 100%; height: 80rpx; position: absolute; top:0; left: 0; z-index: 100;
				.uni-input{
					width: 100%; height: 80rpx;
				}
			}

			&:last-child {
				margin-bottom: 0;
			}

			.tit {
				width: 120upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base; font-weight: bold;
			}
			.tit2{
				min-width: 190rpx; width: auto;
				image{ width: 30rpx; height: 30rpx;}
			}

			input {
				width: calc(100% - 100upx);
				height: 80upx;
				line-height: 80upx;
				font-size: $font-sm + 2upx;
				color: $font-color-dark; background:transparent;
			}
			.span{
				flex: 1;
				font-size: $font-sm + 2upx;
				color: $font-color-dark;
			}

			.cell-icon{
				color: #666;
			}

			.date {
				height: 80upx;
				line-height: 80upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
			}

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
			.confirm-btn{
				width:140rpx; height:60rpx; margin:10rpx 0 0 0; line-height:60rpx; font-size:28rpx;
			}
		}
	}
	.tips{
		color:#fa436a; font-size:24rpx; padding:10rpx 10rpx 0;
	}
.banner{
	height: 300rpx; border-radius: 10rpx; background-color: #eee; margin: 0 20rpx; overflow: hidden;
	image{ width: 100%;}
	swiper {
		width: 100%;
		height: 300rpx;
		swiper-item {
			image {
				width: 100%;
				height: 300rpx;
			}
		}
	}
}
</style>